<template>
  <app-header></app-header>
  <div>
    <!-- 左半部分 -->
    <div class="login-left">
      <div class="login-form">
          <br>
          <!-- 向左的按钮 -->
          <div class="right_button" @click="toMainPage">
            <div>
              <img src="@/assets/point_to_left.png" alt=""  class="right_arrow">
            </div>
          </div>

          <form action="/submitform">
            <p style="font-size: 30px;font-family: '黑体';">登录</p>
            <div style="margin-top: 5%;">
              <p class="user_name_text">用户名</p>
              <input type="text" name="用户名" id="username" class="user_name_input">
            </div>
            
            <div style="margin-top: 5%">
              <p class="password_text">密码</p>
              <input type="password" name="密码" id="password" class="password_input">
            </div>
            <div>
               <a href="" class="forget_password_text">忘记密码?</a>
            </div>
           
            <div style="margin-top: 5%;">
              <button class="start-button">开始</button>
              <br><br>
            </div>
          </form>
          <button class="register-button" @click="toRegisterPage">注册</button>
          <div style="margin-top: 10%;"></div>
        </div>
          
    </div>
    <!-- 右半部分 -->
    <div class="login-right">
      <img src="@/assets/login-right-pic.png" alt="只差一步！" class="just_one_step">
      <img src="@/assets/login-pagetail.png" alt="图片加载失败" class="login-pagetail">
    </div>
  
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
export default {
  components: { AppHeader },
  data(){
    return{

    }
  },
  methods:{
    toRegisterPage(){
      window.location.href = '/register'
    },
    toMainPage(){
      window.location.href = '/'
    }
  }
}
</script>

<style>
/* 左半部分 */
.login-left{
  width: 50%;
}
/* 右半部分 */
.login-right{
  float: right;
  width: 50%;
}
/* 登录表单 */
.login-form{
  width: 70%;
  border: 40px solid rgb(255, 213, 21);
  border-radius: 3px;
  background-color: rgb(255, 252, 246);
  margin-top: 5%;
  margin-bottom: 5%;
  margin-left: 15%;
  box-shadow:  1.3px 6.6px 6.6px hsl(0deg 0% 0% /0.20);
  text-align: center;
}

/* 开始按钮 */
.start-button{
  background-color: rgb(255, 213, 21);
  border-radius: 10px;
  border: 0px;
  width: 35%;
  font-size: 190%;
}
/* 注册按钮 */
.register-button{
  background-color: rgb(255, 252, 246);
  border-radius: 10px;
  border: 1px solid grey;
  width: 35%;
  font-size: 190%;
}
/* 用户名（小字） */
.user_name_text{
  position: absolute;
  margin-top: -0.5%;
  margin-left: 8%; 
  background-color: rgb(255, 252, 246);
}
/* 用户名（输入框） */
.user_name_input{
  width: 70%; 
  height: 40px; 
  border-radius: 10px; 
  background-color: rgb(255, 252, 246);
}
/* 密码（小字） */
.password_text{
  position: absolute; 
  margin-top: -0.5%;
  margin-left: 8%; 
  background-color: rgb(255, 252, 246);
}
/* 密码（输入框） */
.password_input{
  width: 70%; 
  height: 40px; 
  border-radius: 10px; 
  background-color: rgb(255, 252, 246);
}

/* 忘记密码的文字 */
.forget_password_text{
  color: rgb(93, 160, 236);  
  margin-left: 60%;
}
/* 表单里那个向左的箭头 */
.logout_img{
  position: absolute;
  margin-left: -16%;
  width: 2.8%;
}
/* 只剩一步了 */
.just_one_step{
  position: absolute;
  top: 45%; 
  right: 10%; 
  width: 25%;
}
/* 右下角图片 */
.login-pagetail{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  
}

/* 向左的按钮 */
.right_button{
  width: 7%;
  height: 7%;
  background: #FFD515;
  border-radius: 100%;
  margin-left: 3%;
}
/* 向左的按钮 */
.right_button:hover{
  width: 7%;
  height: 7%;
  background: #f3c708;
  border-radius: 100%;
  margin-left: 3%;
}
/* 向左的按钮 */
.right_button:active{
  width: 7%;
  height: 7%;
  background: #FFD515;
  border-radius: 100%;
  margin-left: 3%;
}
/* 按钮里的箭头 */
.right_arrow{
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
}

@media screen and (max-width: 824px) {
  .login-pagetail,.just_one_step{
    visibility: hidden;
  }
  
  .login-form{
    margin:auto;
    position: absolute;
    top: 20%;  
    margin-left: 7%;
    margin-right: 7%;
    width: 70%;
    border: 30px solid rgb(255, 213, 21);
  }
  .logout_img{
    margin-left: -48%;
    width: 8.8%;
  }
  .user_name_text{
    margin-left: 20%;
    margin-top: -2%;
  }
  .password_text{
    margin-left: 20%;
    margin-top: -2%;
  }
  .start-button{
    font-size: 150%;
  }
  .register-button{
    font-size: 150%;
  }
  
}
@media screen and (max-height:610px){
  .login-pagetail{
    visibility: hidden;
  }
}
@media screen and (max-height:250px){
  .just_one_step{
    visibility: hidden;
  }
}
</style>
